@extends('layouts.back_stage')
@section('content')
    <style>
        .tableBg{padding:50px;background:#fff;margin-top:10px;height:500px;}
        .lis{position: relative;background:#f6f6f6;margin: 20px 0;width:150px;height:180px;border:1px solid #ccc;display:inline-block;margin-right:100px;cursor:pointer;}
        .lis img{width:130px;height:130px;margin:10px;}
        .lis p{width:150px;height:30px;line-height:25px;text-align:center;font-size:15px;}
        [v-cloak] {display: none;}
    </style>
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">订单综合查询</h3></div>
        <!-- 主体-->
        <div class="page-body">
            <div class="row app" id="guanLi" v-cloak>
                <div class="col-md-12 row row-table-box">
                    <ul class="tableBg borderBg">
                        <li class="lis lis1" @click="tongJi"><img src="{{ env('CDN_DOMAIN_NAME') }}/img/statistics.jpg" alt=""><p>订货统计</p></li>
                        <li class="lis lis2" @click="dingFaCun"><img src="{{ env('CDN_DOMAIN_NAME') }}/img/statistics.jpg" alt=""><p>客户订发存</p></li>
                        <li class="lis lis3" @click="fenXi"><img src="{{ env('CDN_DOMAIN_NAME') }}/img/statistics.jpg" alt=""><p>订货分析</p></li>
                        <li class="lis lis4" @click="qingKuang"><img src="{{ env('CDN_DOMAIN_NAME') }}/img/statistics.jpg" alt=""><p>订单执行情况</p></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /主体-->
    </div>

    <script>
        new Vue({
            el: '#guanLi',
            data:{

            },
            mounted(){

            },
            methods:{
                tongJi(){
                    window.location.href='/order-inquire/order-statistics';
                },
                dingFaCun(){
                    window.location.href='/order-inquire/client-order-send';
                },
                fenXi(){
                    window.location.href='/order-inquire/client-order-analysis';
                },
                qingKuang(){
                    window.location.href='/order-inquire/client-order-exec';
                },
            }
        });

        (function($){
            $.fn.num = function(options){
                _this = $(this)
                var _thisTop,_thisRight,_thisBottom,_thisLeft,_thisTopBottom,_thisRightLeft,_thisAll

                n1 = _this.width();
                h1 = _this.height();

                var defaults = {
                    Type:'num1',
                    Color:'#abcdef',
                    speed:300,
                }
                var options = $.extend({},defaults,options)
                var becurr = "background:"+options.Color+";position:absolute;border-radius:10px;opahide;"
                switch(options.Type){
                    case 'num3':
                        num3()
                        break;
                }
                function than(_this){
                    var obj = new Object();
                    obj.name = '123'
                    obj.thsn = function(){
                        _thisTop = _this.find('.divTop').stop().show()
                        _thisRight = _this.find('.divRight').stop().show()
                        _thisBottom = _this.find('.divBottom').stop().show()
                        _thisLeft = _this.find('.divLeft').stop().show()
                        _thisTopBottom = _this.find('.divTop,.divBottom').stop().show()
                        _thisRightLeft = _this.find('.divLeft,.divRight').stop().show()
                        _thisAll = _this.find('.divTop,.divBottom,.divLeft,.divRight').stop().show()
                    }
                    return obj;
                }

                var opashow = 'opashow',opahide = 'opahide'
                function num3(){
                    // top边框
                    var divTop ="<div style='"+becurr+"top:-2px;left:-2px;width:0px;height:2px' class='divTop'></div>";

                    // right边框
                    var divRight ="<div style='"+becurr+"top:-2px;right:-2px;width:2px;height:0px;' class='divRight'></div>";

                    // Bottom边框
                    var divBottom ="<div style='"+becurr+"bottom:-2px;right:-2px;width:0px;height:2px' class='divBottom'></div>";

                    // Left边框
                    var divLeft ="<div style='"+becurr+"bottom:-2px;left:-2px;width:2px;height:0px;' class='divLeft'></div>";
                    _this.hover(function(){
                        el = $(this)
                        el.append(divTop,divRight,divBottom,divLeft);
                        num3 = new than(el)
                        num3.thsn()
                        _thisTopBottom.animate({width:n1+3.5},options.speed);
                        _thisRightLeft.animate({height:h1+3.5},options.speed);
                    },function(){
                        _thisTopBottom.animate({width:0},options.speed);
                        _thisRightLeft.animate({height:0},options.speed,function(){
                            _thisAll.remove()
                        });
                    })
                }
            }
        })(jQuery);
        $('.lis1').num({Type:'num3'})
        $('.lis2').num({Type:'num3'})
        $('.lis3').num({Type:'num3'})
        $('.lis4').num({Type:'num3'})
    </script>
@endsection